<template >
  <div v-show="$route.meta.showFather">
    <div class="head">
      <Head></Head>
    </div>
    <div class="menu">
      <Menu></Menu>
    </div>
    <div class="food" >
      <el-form :model="queryParams" ref="queryForm" size="default" :inline="true" label-width="68px">
        <el-form-item label="菜品名称" prop="dishName">
          <el-input
              v-model="queryParams.dishName"
              placeholder="请输入菜品名称"
              clearable
              @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="菜品菜系" prop="compLevel">
          <el-select v-model="queryParams.cuisine" placeholder="请选择菜品菜系" clearable>
            <el-option
                v-for="item in dict_cuisine"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" size="default" @click="handleQuery">搜索</el-button>
          <el-button :icon="Refresh" size="default" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row class="food" >
        <!--根据传入的数字进行更改-->
        <el-col
            v-for="dish in tableProp"
            :key="dish.dishId"
            :span="6"
            class = custom-col
        >
          <el-card :body-style="{ padding: '10px' }" @click="ToDetails(dish.dishId)" style="margin-right: 20px;">
            <template #default="scope"><img :src="baseStaticRecourseAPI[NOW_ENVIRONMENT]+dish.picture" alt="暂无图片" class="image"/>
              <div style="padding: 14px">
                <span>{{ dish.dishName }}</span> <span>   售价：{{ dish.salesPrice }}</span>
                <br>
                <span>菜系：{{ dish.cuisine }}</span>
              </div>
            </template>
          </el-card>
        </el-col>

      </el-row>
      <el-pagination class = pagination
                     layout="prev, pager, next" :total="50"
                     @change="handlePageChange">
      </el-pagination>
    </div>
  </div>
  <router-view />
</template>


<script setup>
import Menu from "@/components/Menu.vue";
import Head from "@/components/Head.vue";
import {queryAllDishes} from "@/web-api/DishAndRes_User/dishes-user.js"
// 在组件顶部导入Vue Router
import { useRouter } from "vue-router";
import router from "@/router/index.js";
import {baseStaticRecourseAPI, NOW_ENVIRONMENT} from "../../baseAPIConfig.js";
import {dict_cuisine} from "@/utils/common.js";

let route = useRouter();

const handlePageChange = (pageNum, pageSize)=>{
  queryParams.pageNum = pageNum;
  queryParams.pageSize = pageSize;
  handleQuery();
}
let queryParams = reactive({
  // 同步分页器
  pageNum: 1,
  pageSize: 8,
  dishName: null,
  cuisine: null
})

// 当前页数据
let tableProp = ref([]);
// 当前页数据总数
let total = ref(0);
// 表格加载遮罩层
let tableLoading = ref(false);
// 选中的菜品id
let ids = ref([])
const handleQuery = ()=>{
  getList(queryParams);
}
const getList = (queryParams) => {
  console.log("queryParams",queryParams);

  // 设置表格加载状态为 true
  tableLoading.value = true;

  let params = {pageNum: queryParams.pageNum, pageSize: 8,dishName: queryParams.dishName, cuisine: queryParams.cuisine}
  // 构建请求参数对象
  console.log(params);

  // 调用 queryAllSatisfiedDishes 函数进行数据查询
  queryAllDishes(params).then(res => {
    tableProp.value = res.rows
    console.log('res',res);
    // 更新总条目数
    total.value = res.total;
    console.log(total.value)
    // 设置表格加载状态为 false，表示加载完成
    tableLoading.value = false;
    console.log("data",tableProp.value)
  });
};
const resetQuery = ()=>{
  queryParams = reactive({
    // 同步分页器
    pageNum: 1,
    pageSize: 10,
    dishName: null,
    cuisine: null
  });
  handleQuery();
}
let components= {
  Menu,
  Head
};

const ToDetails=(dishId)=> {
  // 使用 router.push 进行路由导航，跳转到菜品详情页面
  console.log("点击了一下");
  router.push(`/dishes/index/${dishId}`);
};

let currentUrl = ref();
onMounted(() => {
  currentUrl.value = route.path;
  getList(queryParams);
})

</script>

<style scoped>
.food {
  margin-left: 20px;   /* 设置左边距 */
  margin-right: 20px;  /* 设置右边距 */
}
.custom-col {
  margin-bottom: 10px; /* 设置左右边距，根据需要调整值 */
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
.image {
  width: 300px;
  height: 200px;
}
</style>